<template>
	<view class="jobfair-container">
		<x-skeleton type="banner" :loading="loading">
			<view class="swiper">
				<image class="swiper-img" :src="api_host + detail.hallImages" mode="heightFix"></image>
			</view>
		</x-skeleton>
		<x-skeleton type="list" :loading="loading" :configs="tabConfigs">
			<view class="jobfair-tabs">
				<view class="tab-item" @click="nologinJump(`/subpage/talentemployment/employment/companylist?id=${detail.id}&type=1`)">
					<image class="tab-img" src="https://hxs.dsjhs.com:553/prod-api/profile/company.png"></image>
					<view class="tab-item-text">
						<text class="text-title">招聘企业</text>
						<text class="text-count">{{ detail.companyNumber || 0 }}家企业</text>
					</view>
				</view>
				<view class="tab-item" @click="nologinJump(`/subpage/talentemployment/employment/allpost?id=${detail.id}&type=1`)">
					<image class="tab-img" src="https://hxs.dsjhs.com:553/prod-api/profile/post.png"></image>
					<view class="tab-item-text">
						<text class="text-title">招聘岗位</text>
						<text class="text-count">{{ detail.stationNumber || 0 }}个岗位</text>
					</view>
				</view>
			</view>
		</x-skeleton>
		<x-skeleton type="text" :loading="loading" :configs="listConfigs">
			<view class="jobfair-content">
				<view class="jobfair-info">
					<text class="sub-title" style="display: inline;">{{ detail.careerTitle }}</text>
					<text :class="['label',  statusText(detail.progState).class]">{{ statusText(detail.progState).text }}</text>
				</view>
				<view class="jobfair-items">
					<view class="jobfair-labels">
						<text class="lebel">主题类型：</text>
						<view class="common-label">
							<text>{{ detail.companyNumber || 0 }}家企业</text>
							<text>{{ detail.stationNumber || 0 }}个岗位</text>
						</view>
					</view>
					<view class="jobfair-labels">
						<text class="lebel">详细地址：</text>
						<text class="text">{{ detail.hostAddr }}</text>
						<text class="navigate" @click="handleNav"></text>
					</view>
					<view class="jobfair-labels">
						<text class="lebel">召开时间：</text>
						<text class="text">{{ detail.meetTime | formatDateTime }}</text>
					</view>
					<view class="jobfair-labels">
						<text class="lebel">结束时间：</text>
						<text class="text">{{ detail.endTime | formatDateTime }}</text>
					</view>
					<view class="jobfair-labels">
						<text class="lebel">主办单位：</text>
						<text class="text">{{ detail.hostOrg }}</text>
					</view>
					<view class="jobfair-labels">
						<text class="lebel">承办单位：</text>
						<text class="text">{{ detail.underOrg }}</text>
					</view>
					<view class="jobfair-labels">
						<text class="lebel">协办单位：</text>
						<text class="text">{{ detail.jointlyOrg }}</text>
					</view>
					<view class="jobfair-labels">
						<text class="lebel">联系人：</text>
						<text class="text">{{ detail.liaison }}</text>
					</view>
					<view class="jobfair-labels">
						<text class="lebel">联系电话：</text>
						<text class="text telphone" @tap="handleCall">{{ detail.liaisonPhone }}</text>
					</view>
				</view>
				<view class="activety-detail">
					<text class="sub-title">活动详情：</text>
					<u-parse :content="detail.eventDetail" :tagStyle="style"></u-parse>
				</view>
				<view class="jobfair-exhibition">
					<text class="sub-title">展会分布图：</text>
					<u-parse :content="detail.eventDistrib" :tagStyle="style"></u-parse>
				</view>
			</view>
		</x-skeleton>
	</view>
</template>

<script>
	import {
		getBanners
	} from '@/common/api_user.js'
	
	import {
		careerFairInfo,
	} from '@/common/api_employment.js'
	
	export default {
		data() {
			return {
				banIndex: 0,
				swiperHeight: 250,
				bannerList: [],
				detail: {},
				loading: true,
				tabConfigs: {
					gridRows: 1,
					gridColumns: 2
				},
				listConfigs: {
					gridRows: 3,
				},
				style: {
					p: 'font-size: 13px;color: #34314F;line-height: 22px;',
					img: 'display:-webkit-box;width:100% !important;'
				}
			}
		},
		created() {
			if (!this.hasLogin) {
				this.toLogin()
				return false
			}
			this.getBanners()
		},
		onLoad(option) {
			console.log(option, 88)
			this.getCareerFairInfo(option.id)
		},
		filters: {
			
		},
		computed: {

		},
		onShareAppMessage(res) {
			return {
				title: this.detail.careerTitle,
				path: `/subpage/talentemployment/jobfair/jobfairdetail?id=${this.detail.id}`,
				imageUrl: 'https://hxs.dsjhs.com:553/prod-api/profile/zhaopinhui.png',
				success(res) {
					uni.showToast({
						title: '分享成功'
					})
				},
				fail(res) {
					uni.showToast({
						title: '分享失败',
						icon: 'none'
					})
				}
			}
		},
		methods: {
			// 打电话
			handleCall() {
				uni.makePhoneCall({
					phoneNumber: this.detail.liaisonPhone
				})
			},
			toLogin() {
				uni.showModal({
					title:'提示',
					content:'请先完成登录',
					showCancel: false,
					confirmText:'去登录',
					success(res) {
						if(res.confirm){
							uni.navigateTo({
								url:'/pages/me/mobile_login'
							})
						}
					}
				})
			},
			testClick(e) {
				console.log(e, 'test')
			},
			// 导航
			handleNav() {
				console.log(this.detail, 'detail')
				uni.openLocation({
					latitude: Number(this.detail.latitude),
					longitude: Number(this.detail.longitude),
					name: this.detail.careerTitle,
					address: this.detail.hostAddr
				})
			},
			async getBanners() {
				const that = this
				const res = await getBanners({
					affiliation: '1'
				})
				if (res.code == 200) {
					this.bannerList = res.data
				}
			},
			async getCareerFairInfo(id) {
				const postData = await careerFairInfo({id})
				console.log(postData, 99)
				this.loading = false
				this.detail = postData.data
			},
			statusText(type) {
				switch(type) {
					case 0:
						return {
							class: 'start',
							text: '马上开始'
						}
					case 1:
						return {
							class: 'hot',
							text: '正在热招'
						}
					case 2:
						return {
							class: 'end',
							text: '已经结束'
						}
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.jobfair-container {
		width: 100%;
		min-height: 100vh;
		padding: 0 32rpx 32rpx;
		background-color: #F2F5FF;
		box-sizing: border-box;
		.swiper {
			height: 320rpx;
			border-radius: 20px;
			overflow: hidden;
			.swiper-img {
				width: 100% !important;
				height: 100%;
			}
		}
		.jobfair-tabs {
			display: flex;
			justify-content: space-between;
			margin: 24rpx 0;
			.tab-item {
				display: flex;
				width: 330rpx;
				height: 184rpx;
				background: #FFFFFF;
				border-radius: 20px;
				padding: 38rpx 10rpx 22rpx 10rpx;
				box-sizing: border-box;
				.tab-img {
					display: block;
					width: 124rpx;
					height: 124rpx;
					margin-right: 16rpx;
				}
				.text-title {
					display: block;
					margin-bottom: 10rpx;
					font-weight: 600;
					font-size: 36rpx;
					color: #34314F;
					line-height: 50rpx;
					text-align: left;
				}
				.text-count {
					font-weight: 400;
					font-size: 24rpx;
					color: rgba(52, 49, 79, 0.7);
					text-align: left;
				}
			}
		}
		.jobfair-content {
			width: 100%;
			padding: 52rpx 32rpx 32rpx;
			box-sizing: border-box;
			background-color: #FFFFFF;
			border-radius: 40rpx;
			
			.jobfair-info {
				margin-bottom: 26rpx;
				
				.label {
					margin-left: 24rpx;
					font-weight: 400;
					font-size: 26rpx;
					line-height: 16px;
				}
			}
			.jobfair-items {
				margin-bottom: 48rpx;
				.jobfair-labels {
					display: flex;
					.lebel {
						display: block;
						min-width: 156rpx;
						margin-right: 14rpx;
						font-weight: 400;
						font-size: 26rpx;
						color: #34314F;
						line-height: 28px;
						text-align: left;
						font-style: normal;
					}
					.navigate {
						width: 96rpx;
						height: 40rpx;
						margin-left: 16rpx;
						margin-top: 8rpx;
						background: url('https://hxs.dsjhs.com:553/prod-api/profile/daohang.png') no-repeat center;
						background-size: 100% 100%;
					}
					.text {
						display: block;
						font-weight: 400;
						font-size: 26rpx;
						color: #34314F;
						line-height: 28px;
					}
					.common-label {
						display: flex;
						flex-wrap: nowrap;
						align-items: center;
						text {
							display: block;
							margin-right: 16rpx;
							padding: 4rpx 12rpx;
							font-size: 24rpx;
							color: #34314F;
							border-radius: 8rpx;
							background-color: #F4F4F4;
							box-sizing: border-box;
						}
					}
					.telphone {
						position: relative;
						&::after {
							position: absolute;
							top: 12rpx;
							right: -40rpx;
							display: block;
							width: 32rpx;
							height: 32rpx;
							background: url('https://hxs.dsjhs.com:553/prod-api/profile/dianhua-icon.png') no-repeat center;
							background-size: 100% 100%;
							content: '';
						}
					}
				}
				
			}
			.activety-detail {
				margin-bottom: 48rpx;
				.info {
					display: block;
					margin-bottom: 20rpx;
					font-weight: 400;
					font-size: 26rpx;
					color: #34314F;
					line-height: 22px;
					text-align: left;
				}
				img {
					width: 200px;
				}
				
			}
		}
		.sub-title {
			display: block;
			margin-bottom: 12rpx;
			font-weight: 600;
			font-size: 32rpx;
			color: #34314F;
			line-height: 22px;
			text-align: left;
		}
		.activety-img {
			width: 100%;
			border-radius: 12px;
		}
		.hot {
			color: #FF7F1C !important;
		}
		.start {
			color: #0066FD !important;
		}
		.end {
			color: rgba(52, 49, 79, 0.40) !important;
		}
	}
</style>